<template>
    <view>
        <u-toast ref="uToast" /><u-no-network></u-no-network>
        <u-navbar title="申请发票" safeAreaInsetTop fixed placeholder @leftClick="goNavigateBack"></u-navbar>

        <view class="coreshop-bg-white">
            <u--form :model="model" :rules="rules" ref="uForm" errorType="message" labelPosition="top" labelWidth="100">
                <view class="coreshop-padding-10">
                    <u-form-item label="发票类型" prop="typeName" borderBottom>
                        <u-radio-group v-model="model.typeName" placement="column">
                            <u-radio :customStyle="{marginBottom: '8px'}" @change="radioChange" v-for="(item, index) in radioItems" :key="index" :name="item.name" :label="item.name"></u-radio>
                        </u-radio-group>
                    </u-form-item>

                    <u-form-item label="发票抬头" class="cheque" prop="name" borderBottom>
                        <u--input v-model="model.name" placeholder='公司/个人名称' @input="getCheque" />
                        <view class="cheque-content" v-show="isShow">
                            <view class="tips-item" v-for="(item,index) in chequeLisit" :key="index" @click="chooseCheque(item)">
                                <view class="tips-name">
                                    {{item.name|| ''}}
                                </view>
                                <view class="sub-div">
                                    <view class="tax-no">
                                        {{item.code|| ''}}
                                    </view>
                                    <view class="tips-num">
                                        <view class="num">
                                            {{item.frequency|| ''}}
                                        </view>
                                        人使用过
                                    </view>
                                </view>
                            </view>
                        </view>
                    </u-form-item>
                    <u-form-item label="纳税人识别号" prop="code" v-show="type === '3'" borderBottom>
                        <u--input v-model="model.code" placeholder='纳税人识别号' />
                    </u-form-item>
                    <u-form-item label="发票内容" v-show="type === '3'" borderBottom>
                        <view>明细</view>
                    </u-form-item>
                    <view class="coreshop-margin-top-20">
                        <u--text type="error" text="注："></u--text>
                        <u--text text="个人发票只需录入抬头名称为个人姓名即可，企业发票需要提交公司名称和纳税人识别号。" size="13"></u--text>
                        <u--text text="发票一旦开具，不可修改，请认真填写。" size="13"></u--text>
                        <u--text text="发票将在订单完成后7个工作日开具。" size="13"></u--text>
                        <u--text text="电子发票可在订单详情中下载，纸质发票将在订单完成后7个工作日内寄出。" size="13"></u--text>
                    </view>
                </view>

                <view class="coreshop-bg-white coreshop-footer-fixed coreshop-foot-padding-bottom">
                    <u-button class="coreshop-percent-100" type="error" size="normal" @click="saveInvoice">提交申请</u-button>
                </view>
            </u--form>
        </view>

        <!-- 登录提示 -->
        <coreshop-login-modal></coreshop-login-modal>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                orderId: '',
                radioItems: [
                    {
                        name: '企业发票',
                        value: '3'
                    }, {
                        name: '个人发票',
                        value: '2'
                    }
                ],
                type: '3', // 发票类型 1不开发票、2个人发票、3公司发票
                model: {
                    typeName: '', // 发票类型 2个人 3企业
                    name: '', // 抬头名称
                    code: '', // 税号
                },
                isShow: false,
                chequeLisit: [],
                rules: {
                    typeName: [
                        {
                            required: true,
                            message: '请选择发票类型',
                            trigger: ['change', 'blur'],
                        }
                    ],
                    name: [
                        {
                            required: true,
                            message: '请输入发票抬头',
                            trigger: ['change', 'blur'],
                        }
                    ],
                    code: [
                        {
                            validator: (rule, value, callback) => {
                                if (this.type === '3' && !this.model.code) {
                                    return false;
                                }
                                return true;
                            },
                            message: '请输入发票税务编号'
                        }
                    ],
                },
            }
        },
        onReady() {
            this.$refs.uForm.setRules(this.rules);
        },
        onLoad(options) {
            this.orderId = options.orderId;
            if (this.orderId) {
                this.checkInvoice();
            } else {
                this.$refs.uToast.show({
                    message: '获取失败', type: 'error', complete: function () {
                        uni.navigateBack({
                            delta: 1
                        });
                    }
                });
            }
        },
        methods: {
            // 获取订单详情
            checkInvoice() {
                let _this = this
                let data = {
                    id: _this.orderId
                }
                _this.$u.api.checkInvoice(data).then(res => {
                    if (res.status) {
                        if (res.data) {
                            this.$refs.uToast.show({
                                message: '此订单已经提交发票申请。', type: 'error', complete: function () {
                                    uni.navigateBack({
                                        delta: 1
                                    });
                                }
                            });
                        }
                    } else {
                        _this.$u.toast(res.msg)
                    }
                })
            },
            // 选中某个单选框时，由radio时触发
            radioChange(e) {
                this.radioItems.forEach(item => {
                    if (item.name === e) {
                        this.type = item.value
                    }
                })
            },
            // 保存发票信息
            saveInvoice() {
                this.$refs.uForm.validate().then(res => {
                    let data = {
                        type: this.type,
                        name: this.model.name
                    }
                    // 不是企业类型不需要税号
                    data.code = this.type === '3' ? this.model.code : '';
                    data.orderId = this.orderId;

                    console.log(data);
                    this.$u.api.submitInvoiceApply(data).then(res => {
                        if (res.status) {
                            if (res.data) {
                                this.$refs.uToast.show({
                                    message: '发票申请提交成功。', type: 'success', complete: function () {
                                        uni.navigateBack({
                                            delta: 1
                                        });
                                    }
                                });
                            } else {
                                this.$u.toast(res.msg)
                            }
                        } else {
                            this.$u.toast(res.msg)
                        }
                    });

                }).catch(errors => {
                    uni.$u.toast('提交的数据校验失败，请输入合法信息！')
                })
            },
            getCheque(event) {
                let name = event;
                if (name != '') {
                    let data = {
                        name: name
                    }
                    this.$u.api.getTaxInfo(data).then(res => {
                        if (res.status) {
                            if (res.data.length != 0) {
                                this.isShow = true
                                this.chequeLisit = res.data
                            } else {
                                // this.isShow = false
                            }
                        } else {
                            this.$u.toast(res.msg)
                        }
                    });
                } else {
                    this.isShow = false
                }
            },
            chooseCheque(item) {
                this.model.name = item.name;
                this.model.code = item.code;
                this.isShow = false;
                this.type = '3';
                this.model.typeName = this.radioItems[1].name;
            }
        }
    }
</script>
<style scoped lang="scss">
    @import "invoice.scss";
</style>
